<template>
	<div id="news" class="container">
		<div class="container-box">
			<div class="top-box">
				<h2 class="box-title-ico">
					<span class="box-title-span">{{name}}有关的快讯</span>
				</h2>
			</div>
			<div class="content-box">
				<div id="accordion">
					<template v-for="(item,$index) in  list">
						<div class="card">
							<div class="card-header" :id="accid+$index">
								<a class="btn btn-link" data-toggle="collapse" :data-target="id_icon+ids+$index" :aria-expanded="!$index?true:false" :aria-controls="ids+$index">
									<h5 class="panel-title">
										{{item.title}}
										<span class="right">
											<span class="news-time">
												<i class="fa fa-clock-o"></i>
												{{item.create_time}}
											</span>
											<i class="fa fa-angle-double-down"></i>
										</span>
									</h5>
								</a>
							</div>
						
							<div :id="ids+$index" class="collapse" :class="!$index?'show':'' " :aria-labelledby="accid+$index" data-parent="#accordion">
								<div class="card-body">
									 {{item.content}}
								</div>
							</div>
						</div>
					</template>
					
				</div>
				<a href="javascript:;" @click="loadMore">
					<h5 class="load-more"><i class="fa fa-angle-double-down"></i> 加载更多</h5>
				</a>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data: function() {
			return {
				list: [],
				id: "",
				accid: "collapse",
				ids:"collapse-in",
				id_icon: "#",
				pageCount: 0,
				page: 1
			};
		},
		props:['name'],
		mounted: function() {
			let id = this.$route.params.id;
			this.id = id;
			let url = "//api.imrating.com/api/news/";
			let me = this;
			$.getJSON(url, { symbol: id }, function(respos) {
				me.list = respos.data.news;
				me.pageCount = Math.ceil(respos.data.count / 10);
			});
		},
		methods: {
			loadMore() {
				let url = "//api.imrating.com/api/news/";
				let me = this;
				me.page = me.page + 1;
				$.getJSON(
					url,
					{
						symbol: me.id,
						page: me.page,
						page_size: 10
					},
					function(respos) {
						let data = respos.data.news;
						for (let item of data) {
							me.list.push(item)
						}
						
					}
				);
			}
		},
		props:['name']
	}
</script>
<style scoped="scoped">
.panel-title{
	margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
	width: 100%;
	overflow: hidden;
}
.news-time {
    margin-right: 30px;
    font-size: 12px;
}
.load-more{
	text-align: center;
	padding: 10px 0;
	border: 1px solid #ddd;
	color: #0056B3;
}
a:hover{
	text-decoration: none;
}
</style>